import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:jdapp/widget/JdButton.dart';
import 'package:jdapp/services/EventBus.dart';

class ProductContentFirst extends StatefulWidget {
  ProductContentFirst({Key? key}) : super(key: key);

  _ProductContentFirstState createState() => _ProductContentFirstState();
}

class _ProductContentFirstState extends State<ProductContentFirst> {
  var actionEventBus;
  void initState() {
    super.initState();
    //监听广播
    //监听所有广播
    // eventBus.on().listen((event) {
    //   print(event);
    //   this._attrBottomSheet();
    // });
    this.actionEventBus = eventBus.on<ProductContentEvent>().listen((event) {
      this._attrBottomSheet();
    });
  }

  void dispose() {
    super.dispose();
    this.actionEventBus.cancel();
  }

  _attrBottomSheet() {
    showModalBottomSheet(
        context: context,
        builder: (contex) {
          return GestureDetector(
            //解决showModalBottomSheet点击消失的问题
            onTap: () {
              // return false;
            },
            child: Stack(
              children: <Widget>[
                Container(
                  padding: EdgeInsets.all(20),
                  child: ListView(
                    children: <Widget>[
                      Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Wrap(
                            children: <Widget>[
                              Container(
                                width: 100.w,
                                child: Padding(
                                  padding: EdgeInsets.only(
                                      top: 22.h),
                                  child: Text("颜色: ",
                                      style: TextStyle(
                                          fontWeight: FontWeight.bold)),
                                ),
                              ),
                              Container(
                                width: 610.w,
                                child: Wrap(
                                  children: <Widget>[
                                    Container(
                                      margin: EdgeInsets.all(10),
                                      child: Chip(
                                        label: Text("白色"),
                                        padding: EdgeInsets.all(10),
                                      ),
                                    ),
                                    Container(
                                      margin: EdgeInsets.all(10),
                                      child: Chip(
                                        label: Text("白色"),
                                        padding: EdgeInsets.all(10),
                                      ),
                                    ),
                                    Container(
                                      margin: EdgeInsets.all(10),
                                      child: Chip(
                                        label: Text("白色"),
                                        padding: EdgeInsets.all(10),
                                      ),
                                    ),
                                  ],
                                ),
                              )
                            ],
                          ),
                          Wrap(
                            children: <Widget>[
                              Container(
                                width: 100.w,
                                child: Padding(
                                  padding: EdgeInsets.only(
                                      top: 22.h),
                                  child: Text("风格: ",
                                      style: TextStyle(
                                          fontWeight: FontWeight.bold)),
                                ),
                              ),
                              Container(
                                width: 610.w,
                                child: Wrap(
                                  children: <Widget>[
                                    Container(
                                      margin: EdgeInsets.all(10),
                                      child: Chip(
                                        label: Text("白色"),
                                        padding: EdgeInsets.all(10),
                                      ),
                                    ),
                                    Container(
                                      margin: EdgeInsets.all(10),
                                      child: Chip(
                                        label: Text("白色"),
                                        padding: EdgeInsets.all(10),
                                      ),
                                    ),
                                    Container(
                                      margin: EdgeInsets.all(10),
                                      child: Chip(
                                        label: Text("白色"),
                                        padding: EdgeInsets.all(10),
                                      ),
                                    ),
                                    Container(
                                      margin: EdgeInsets.all(10),
                                      child: Chip(
                                        label: Text("白色"),
                                        padding: EdgeInsets.all(10),
                                      ),
                                    ),
                                    Container(
                                      margin: EdgeInsets.all(10),
                                      child: Chip(
                                        label: Text("白色"),
                                        padding: EdgeInsets.all(10),
                                      ),
                                    ),
                                    Container(
                                      margin: EdgeInsets.all(10),
                                      child: Chip(
                                        label: Text("白色"),
                                        padding: EdgeInsets.all(10),
                                      ),
                                    ),
                                  ],
                                ),
                              )
                            ],
                          ),
                          Wrap(
                            children: <Widget>[
                              Container(
                                width: 100.w,
                                child: Padding(
                                  padding: EdgeInsets.only(
                                      top: 22.h),
                                  child: Text("尺寸: ",
                                      style: TextStyle(
                                          fontWeight: FontWeight.bold)),
                                ),
                              ),
                              Container(
                                width: 610.w,
                                child: Wrap(
                                  children: <Widget>[
                                    Container(
                                      margin: EdgeInsets.all(10),
                                      child: Chip(
                                        label: Text("白色"),
                                        padding: EdgeInsets.all(10),
                                      ),
                                    ),
                                    Container(
                                      margin: EdgeInsets.all(10),
                                      child: Chip(
                                        label: Text("白色"),
                                        padding: EdgeInsets.all(10),
                                      ),
                                    ),
                                    Container(
                                      margin: EdgeInsets.all(10),
                                      child: Chip(
                                        label: Text("白色"),
                                        padding: EdgeInsets.all(10),
                                      ),
                                    ),
                                  ],
                                ),
                              )
                            ],
                          ),
                           Divider(),
                          Container(
                            margin: EdgeInsets.only(top: 10),
                            height:80.h,
                            child: InkWell(
                              onTap: () {
                                _attrBottomSheet();
                              },
                              child: Row(
                                children: <Widget>[
                                  Text("数量: ",
                                      style: TextStyle(
                                          fontWeight: FontWeight.bold)),

                                  SizedBox(width: 10),
                                  //CartNum(this._productContent)
                                ],
                              ),
                            ),
                          )
                        ],
                      )
                    ],
                  ),
                ),
                Positioned(
                  bottom: 0,
                  width: 750.w,
                  height: 76.h,
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        flex: 1,
                        child: Container(
                          margin: EdgeInsets.fromLTRB(10, 0, 0, 0),
                          child: JdButton(
                            color: Color.fromRGBO(253, 1, 0, 0.9),
                            text: "加入购物车",
                            cb: () {
                              print('加入购物车');
                            },
                          ),
                        ),
                      ),
                      Expanded(
                        flex: 1,
                        child: Container(
                            margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
                            child: JdButton(
                              color: Color.fromRGBO(255, 165, 0, 0.9),
                              text: "立即购买",
                              cb: () {
                                print('立即购买');
                              },
                            )),
                      )
                    ],
                  ),
                )
              ],
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      child: ListView(
        children: <Widget>[
          AspectRatio(
            aspectRatio: 16 / 9,
            child: Image.network("https://www.itying.com/images/flutter/p1.jpg",
                fit: BoxFit.cover),
          ),
          //标题
          Container(
            padding: EdgeInsets.only(top: 10),
            child: Text("联想ThinkPad 翼480（0VCD） 英特尔酷睿i5 14英寸轻薄窄边框笔记本电脑",
                style: TextStyle(
                    color: Colors.black87, fontSize: 36.sp)),
          ),
          Container(
              padding: EdgeInsets.only(top: 10),
              child: Text(
                  "震撼首发，15.9毫米全金属外观，4.9毫米轻薄窄边框，指纹电源按钮，杜比音效，2G独显，预装正版office软件",
                  style: TextStyle(
                      color: Colors.black54, fontSize: 28.sp))),
          //价格
          Container(
            padding: EdgeInsets.only(top: 10),
            child: Row(
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: Row(
                    children: <Widget>[
                      Text("特价: "),
                      Text("¥28",
                          style: TextStyle(
                              color: Colors.red,
                              fontSize: 46.sp)),
                    ],
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      Text("原价: "),
                      Text("¥50",
                          style: TextStyle(
                              color: Colors.black38,
                              fontSize: 28.sp,
                              decoration: TextDecoration.lineThrough)),
                    ],
                  ),
                )
              ],
            ),
          ),
          //筛选
          Container(
            margin: EdgeInsets.only(top: 10),
            height: 80.h,
            child: InkWell(
              onTap: () {
                _attrBottomSheet();
              },
              child: Row(
                children: <Widget>[
                  Text("已选: ", style: TextStyle(fontWeight: FontWeight.bold)),
                  Text("115，黑色，XL，1件")
                ],
              ),
            ),
          ),
          Divider(),
          Container(
            height:80.h,
            child: Row(
              children: <Widget>[
                Text("运费: ", style: TextStyle(fontWeight: FontWeight.bold)),
                Text("免运费")
              ],
            ),
          ),
          Divider(),
        ],
      ),
    );
  }
}
